<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML源代码</title>
  <link rel="stylesheet" href="codemirror/codemirror.css">
  <link rel=stylesheet href="codemirror/docs.css">
  <link rel=stylesheet href="codemirror/foldgutter.css">
  <link rel=stylesheet href="codemirror/theme/neat.css">
  <script src="codemirror/codemirror.js"></script>
  <script src="codemirror/foldcode.js"></script>
  <script src="codemirror/foldgutter.js"></script>
  <script src="codemirror/brace-fold.js"></script>
  <script src="codemirror/xml-fold.js"></script>
  <script src="codemirror/indent-fold.js"></script>
  <script src="codemirror/markdown-fold.js"></script>
  <script src="codemirror/comment-fold.js"></script>
  <script src="codemirror/active-line.js"></script>
  <script src="codemirror/css.js"></script>
  <script src="codemirror/closetag.js"></script>
  <script src="codemirror/htmlmixed.js"></script>
  <script src="codemirror/javascript.js"></script>
  <script src="codemirror/matchbrackets.js"></script>
  <script src="codemirror/vbscript.js"></script>
  <script src="codemirror/selection-pointer.js"></script>
  <script src="codemirror/xml.js"></script>
  <script src="codemirror/matchtags.js"></script>
  <script src="codemirror/closebrackets.js"></script>
  <script src="codemirror/multiplex.js"></script>
  <script src="codemirror/htmlembedded.js"></script>

  <script src="codemirror/format.js"></script>
  <style>
    .submit{
      background-color: #207ab7;
      background-image: none;
      background-position: 0 0;
      background-repeat: repeat;
      border-color: #207ab7;
      border-radius: 3px;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      box-sizing: border-box;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: normal;

      margin: 0;
      outline: 0;
      padding: 4px 16px;
      text-align: center;
      text-decoration: none;
      text-transform: capitalize;
      white-space: nowrap;
    }
    .cancle{
      background-color: #f0f0f0;
      background-image: none;
      background-position: 0 0;
      background-repeat: repeat;
      border-color: #f0f0f0;
      border-radius: 3px;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      color: #222f3e;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: normal;
      outline: 0;
      padding: 4px 16px;
      text-decoration: none;
      text-transform: capitalize;

    }
    .format{
      background-color: #ffeded;
      background-image: none;
      background-position: 0 0;
      background-repeat: repeat;
      border-color: #f0f0f0;
      border-radius: 3px;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      color: #222f3e;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: normal;
      outline: 0;
      padding: 4px 16px;
      text-decoration: none;
      text-transform: capitalize;
    }
    .CodeMirror-code > div:nth-child(odd){background: #eee;}
    .CodeMirror {background: #f7f7f7;}
    div.btn{background: #fff;text-align: right;padding:10px 40px;border-top: 1px solid #ccc}
    div.btn button{margin-left:10px;cursor: pointer}
  </style>
</head>
<body>
<textarea id="code" name="code" style="height:100%"></textarea>

<script>

  var _html=parent._getHtml();
  //alert(html)
  document.getElementById("code").value=_html;

  var mixedMode = {
    name: "htmlmixed",
    scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null},
      {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "javascript"}]
  };
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    theme:'default',
    autoCloseTags: true,//自动闭合标签
    autoCloseBrackets: true,//自动闭合{}
    foldGutter: true,//代码折叠
    //smartIndent: true,//自动缩进是否开启
    indentUnit: 4, //缩进单位，值为空格数，默认为2 。
    smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
    tabSize: 4, //tab字符的宽度，默认为4 。
    lineNumbers: true,//显示行号
    styleActiveLine: true,//激活当前行
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    lineWrapping:true,//代码包围
    //mode: mixedMode, // 语言及语法模式
    mode: "application/x-ejs",
    selectionPointer: true,
    matchBrackets: true,//括号匹配
    matchTags: {bothTags: true},//匹配标签
    //快捷键
     extraKeys:{
        "F7": function autoFormat(editor) {
         // var totalLines = editor.lineCount();
         // editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
        },
       "Ctrl-Alt-L":autoFormatSelection //快捷键格式化
     }
  });
  editor.setSize('auto','calc(100vh - 52px)');
  formatAll();
</script>
<div class="btn"><button class="cancle" onclick="cancle()">取消</button><button class="format" onclick="autoFormatSelection()" title="CTL+ALT+L">格式化</button><button class="submit" onclick="ok()">确定</button></div>
<script>
  function ok(){
    var html=editor.getValue();
    parent._setHtml(html);
    parent.tinyMCE.activeEditor.windowManager.close();
  }
  function cancle(){
    parent.tinyMCE.activeEditor.windowManager.close();
  }

</script>
</body>
</html>